<template>
	<div class="bind-phone">
		<p class="title">请绑定手机号</p>
		<div class="div-input">
			<label>手机号码</label>
			<input type="num" maxlength="11" v-model="phone" name="phone" placeholder="请输入新的手机号码">
		</div>
		<div class="div-input border-none">
			<label>短信验证码</label>
			<input type="text" name="code" v-model="codes" placeholder="请输入验证码">
			<span class="ash" v-if="isCount">{{time}}s</span>
			<span v-else @click="bind_mobiles">短信验证</span>
		</div>
		<span class="submit-btn" @click="binds">提交</span>
	</div>
</template>

<script type="text/javascript">	
	import { AlertModule } from 'vux'
	import { bind_mobile, bind, check_if_sendCode } from '@/api/api'
	export default {
	  data () {
	    return {
	    	phone: '',
	    	isCount: false,
	    	time: 60,
	    	codes: '',
	    	code_copy: '',
	    }
	  },
	  created () {
	  	if(sessionStorage.getItem('time') > 0 && sessionStorage.getItem('time') < 60){
	  		this.time = sessionStorage.getItem('time')
	  		this.count_down()
	  		this.isCount = true
	  	}
			this.code = Math.floor(Math.random()*100000)
	  },
	  methods: {    
	    router (path) {
	      this.$router.push(path)
	    },
	    bind_mobiles () {
	    	if(this.phone.length < 1){
	    		AlertModule.show({
	    			title: '系统提示',
	    			content: '请输入手机号码',
	    			onHide: () => {
	    				return
	    			}
	    		})
	    	}
	    	var jsonData = {
	    		username: this.phone,
	    		methods: 'web'
	    	}
	    	check_if_sendCode(jsonData).then((res) => {
					if(res.data.status){						
			    	bind_mobile(this.phone, this.code).then((res1) => {
			    		if(res1.data.status){
			    			this.isCount = true
								this.code_copy = res1.data.send_code
			    			AlertModule.show({
				    			title: '温馨提示',
				    			content: res1.data.info,
				    			onHide: () => {
										this.count_down()
				    			}
				    		})
			    		}
			    	})
					}else{
						AlertModule.show({
		    			title: '温馨提示',
		    			content: res.data.info,
		    		})
					}
	    	}).catch((err) => {
					AlertModule.show({
	    			title: '温馨提示',
	    			content: '绑定错误',
	    		})
					console.dir(err)
	    	})
	    },
	    count_down () {
				var _send  = setInterval(() => {
					if(this.time>0){
						this.time--
					}else{
						this.isCount = false
						clearInterval(_send)
						this.time = 60
					}			
					sessionStorage.setItem('time', this.time)		
				},1000)
	    },
	    binds () {
	    	if(this.codes != this.code_copy || this.codes != this.code){
					AlertModule.show({
	    			title: '系统提示',
	    			content: '验证码不正确',
	    			onHide: () => {
	    			}
	    		})
					return
	    	}
	    	bind(this.phone).then((res) => {
	    		if(res.data.status == 1){
	    			AlertModule.show({
		    			title: '系统提示',
		    			content: '绑定成功',
		    			onHide: () => {
		    				sessionStorage.setItem('phone', this.phone)
		    				this.$router.push({path: './personalCenter'})
		    			}
		    		})
	    		}else{
	    			AlertModule.show({
		    			title: '温馨提示',
		    			content: res.data.info,
		    			onHide: () => {
		    				this.codes = ''
		    			}
		    		})
	    		}    		
	    	}).catch((err) => {
	    		console.log(err)
	    	})
	    }
	  }
	}
</script>

<style lang="stylus" scoped>
	.bind-phone
		background-color #f2f2f2
		height 100vh
		width 100vw
		.title
			line-height 5rem
			color #999
			font-size 1.3rem
			padding-left 1.5rem
		.div-input
			display flex
			line-height 5rem
			height 5rem
			overflow hidden
			padding 0 1.5rem
			background-color #fff
			border-bottom 1px solid #e5e5e5
			position relative
			label
				width 6rem
				font-size 1.5rem
			input
				color #333
				background-color #fff
				height 3rem
				margin-top 1rem
				width 100%
				padding-left 1.5rem
				outline none
				font-size 1.5rem
				&::-webkit-input-placeholder
					color #999
			span
				width 9.2rem
				height 3.3rem
				line-height 3.3rem
				text-align center
				background-color #ff659b
				border-radius .3rem
				position absolute
				right 1.5rem
				color #F5F5FA
				font-size 1.5rem
				top .85rem
			.ash
				background-color #ccc
		.border-none
			border none
		.submit-btn
			line-height 5rem
			background-color #FF659B
			border-radius .3rem
			width 92%
			position relative
			left 4%
			display block
			text-align center
			font-size 1.6rem
			font-weight 500
			color #F5F5FA
			margin-top 1.5rem
</style>